<template>
	<!-- -配件商城 -->
	<view class="main" style="position: fixed;width: 100%;">
		<view class="sbgl">
			<!-- 左侧设备分类 -->
			<view class="mean" :style="{'margin-top':mtp}">
				<view class="mean-name word-omit" :class="{'mean-bg':mean.id ==value }" @click="changeMean(mean.id)"
					v-for="mean in sbglMean" :key="mean.id">{{ mean.cate_name }}</view>
			</view>
			<!-- 右侧设备详情 -->
			<view class="detail">

				<view style="position: fixed;top: 30rpx;z-index: 99;background-color: #FFFDEF;width: 75%;">
					<uni-search-bar @confirm="query(keyword1)" :focus="false" placeholder="输入关键词进行搜索"
						v-model="keyword1" />
					<v-tabs v-model="current1" :tabs="tabs" :scroll="true" :pills="true" line-height="0"
						style="margin-top: 10rpx;" pillsColor="#029E8E" activeColor="#fff" @change="changeTab"></v-tabs>
				</view>
				<scroll-view ref="list" @scrolltolower="more" scroll-y
					style="height: 85%;margin-top: 60rpx;width: 100%;">
					<view class="detail-desc" v-if="list.length" v-for="equipment in list" :key="equipment.id"
						@click="jumpTo(equipment.id)">
						<image :src="equipment.image" style="width: 150rpx;height: 150rpx;margin: 20rpx;"></image>
						<view style="width: calc(100% - 150rpx)">
							<view class="word-omit" style="color: #333333;margin-top: 20rpx;">{{ equipment.store_name }}
							</view>
							<view style="font-size: 26rpx;" class="mt30"
								:class="[userInfo.is_worker == 2? 'word-omit' : 'text-omit']">
								价格：<text class="money">￥{{ equipment.price }}</text> </view>
						</view>
					</view>
					<view class="iconfont mt30 flex" style="font-size: 180rpx;color: #029E8E;" v-if="list.length == 0">
						&#xe688;
					</view>
				</scroll-view>


			</view>
		</view>
	</view>
</template>

<script>
	import lauwenSelect from "@/components/lauwen-select/lauwenSelect.vue"
	import wmNumberBox from "@/components/wm-numberBox/wm-number-box.vue"
	import uniSearchBar from '@/components/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
	import combox from "../../../components/uni-ui/lib/uni-combox/uni-combox.vue"
	import vTabs from '../../../components/v-tabs/v-tabs.vue'
	import {
		parts_products,
		parts_category,
		new_parts_category
	} from '../../../api/api.js'
	export default {
		components: {
			combox,
			lauwenSelect,
			wmNumberBox,
			uniSearchBar,
			vTabs
		},
		data() {
			return {
				num: 0,
				current1: 0,
				userInfo: {},
				tabs: [], // 二级数组 
				children: [], //当前选择的元素的子集合
				mtp: '30rpx',
				limit: 10,
				page: 1,
				alldata: "",
				keyword1: "",
				vModelValue: 1, // 步进器
				value: '',
				// 设备菜单
				sbglMean: [],
				keyword: "",
				// 设备描述
				list: [],
				cid: ''
			}
		},
		created() {
			console.log('22222', )
			this.userInfo = uni.getStorageSync('userInfo')
			this.gettype()
		},

		methods: {
			// 调用查询
			query(e) {
				this.datainit(0, 0, e)
			},
			// 加载更多
			more() {
				this.page++
				this.datainit(1)
			},
			// 跳转详情
			jumpTo(shopID) {
				uni.navigateTo({
					url: '/pages/shopInfo/shopInfo?shopID=' + shopID
				})
			},
			// 获取模糊查询数据
			change() {
				this.keyword1 = this.$refs.box.inputVal
			},
			// 获取零配件分类
			gettype() {
				new_parts_category().then(res => {
					this.sbglMean = res.data
					this.value = this.sbglMean[0].id
					this.children = this.sbglMean[0].children
					let activearr = []
					this.children.forEach(item => {
						activearr.push(item.cate_name)
					})
					setTimeout(() => {
						this.tabs = activearr
						this.datainit()
					}, 300)

				})
			},

			//切换二级分类
			changeTab(e) {
				this.current1 = e || 0
				this.datainit()
			},

			// 初始化
			datainit(e, b, c) {
				this.finish = false
				if (!e) {
					this.page = 1
				}
				let sid = ''
				let data = {
					cid: this.cid,
					limit: 10,
					page: this.page,
				}
				if (c) {
					data.keyword = c
				} else if (this.keyword1) {
					data.keyword = this.keyword1
				}
				if (b) {
					data.sid = 0
				} else {
					sid = this.children[this.current1].id
					console.log('sid', sid)
					data.sid = sid
				}
				parts_products(data).then(res => {
					if (this.page != 1 && res.data.length == 0) {
						this.finish = true
						uni.showToast({
							title: '没有更多了~~',
							icon: "none"
						})
					}
					if (e) {
						this.list = this.list.concat(res.data)
						return;
					}
					this.list = res.data
				})
			},

			// 左边菜单id
			changeMean(id) {
				this.value = id
				this.cid = this.value

				this.datainit(0, true)
				let activearr = []
				this.sbglMean.forEach(item => {
					if (id == item.id) {
						this.children = item.children
						item.children.forEach(e => {
							activearr.push(e.cate_name)
						})
					}
				})
				this.tabs = activearr
				console.log('tabs', this.tabs)
			},

			// 查询
			search() {
				this.datainit()
				console.log('触发查询')
			},

		}
	}
</script>

<style scoped lang="less">
	@font-face {
		font-family: 'iconfont';
		/* Project id 2731318 */
		src: url('//at.alicdn.com/t/font_2731318_ktbtdgag34.woff2?t=1630059501837') format('woff2'),
			url('//at.alicdn.com/t/font_2731318_ktbtdgag34.woff?t=1630059501837') format('woff'),
			url('//at.alicdn.com/t/font_2731318_ktbtdgag34.ttf?t=1630059501837') format('truetype');
	}

	.iconfont {
		font-family: iconfont;
		// width: 40upx;
		// height: 90upx;
		// line-height: 90upx;
		font-size: 34upx;
		// color: #999999;
		text-align: center;
		/* font-family: texticons; */
		margin-right: 20upx;
	}

	.main {
		height: 100%;
		overflow: hidden;
		position: relative;

		.footer {
			width: 100%;
			position: fixed;
			bottom: 50rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			padding-left: 15%;

			.btn {
				height: 60rpx;
				width: 200rpx;
				margin: 0 20rpx;
				border-radius: 30rpx;
				background-color: #007AFF;
				text-align: center;
				line-height: 60rpx;
			}

			.btn1 {
				background-color: #FECB54;
			}
		}
	}

	.search {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		position: fixed;
		top: 0;
		z-index: 10;
	}

	.search1 {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		position: fixed;
		top: 0;
		z-index: 10;
	}


	.icons {
		width: 100rpx;
		padding: 0 30rpx;
		height: 75rpx;
		text-align: left;
		margin-right: -20rpx;
		font-size: 50rpx !important;
		color: #aaa;
	}

	.search>lauwen-select {
		flex: 1;
		/* margin-right: 30rpx; */
	}

	.search /deep/.lauwen-select-input.data-v-34fe01fd {
		border: none !important;
	}

	.search /deep/.lauwen-select-input-text {
		color: #999999 !important;
	}

	.search .edit-btn {
		width: 120rpx !important;
		height: 60rpx !important;
		background: #007AFF;
		// color: #fff;
		padding: 0 20rpx;
		margin-top: 0 !important;
		border-radius: 6rpx !important;
		line-height: 60rpx !important;
		font-size: 30rpx;
		background: #5490FE;
	}

	.sbgl {
		height: 95%;
		overflow: hidden;
		// margin-top: 100rpx;

		display: flex;
	}

	.mean {
		height: 100%;
		overflow-y: hidden;
	}

	.mean-name {
		width: 150rpx;
		height: 100rpx;
		background: #F6F9FF;
		color: #aaa;
		font-size: 26rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.mean-bg {
		background: #029E8E;
		color: #fff !important;
	}

	.detail {
		padding: 100rpx 20rpx;
		flex: 1;
		height: 90%;
		overflow: hidden;
		position: relative;
	}

	.detail-search {
		/* margin-top: 10rpx; */
		width: 100%;
		height: 70rpx;
		background: #fff;

		display: flex;

		position: absolute;
		top: 0;
		z-index: 8;
	}

	.detail-search /deep/.lauwen-select-input.data-v-34fe01fd {
		width: 250rpx;
		/* border: none!important; */
		padding: 10rpx 20rpx !important;
		margin-right: 30rpx;
		border: 1rpx solid #999999;
		color: #666666;
		border-radius: 42rpx;
	}

	.detail-search easy-select {
		margin-right: 20rpx;
	}

	.detail-list {
		/* 		display: flex;
		flex-direction: column; */
		padding-top: 74rpx;
		/* height: 88%; */
	}

	.detail-desc {
		display: flex;
		margin-top: 30rpx;
		background: #F6F9FF;
		width: 100%;
		overflow-y: auto;
	}

	/deep/.detail-list::-webkit-scrollbar {
		display: none;
	}

	.detail-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.word-omit {
		/*word-break:break-all;*/
		white-space: nowrap;
		color: #666666;
		/*强制在一行显示*/
		text-overflow: ellipsis;
		/*设置超出内容显示...*/
		overflow: hidden;
		/*一定不能少 超出的内容进行隐藏*/
	}

	.text-omit {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		color: #999999;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	/deep/.uni-combox__selector-scroll.data-v-5f8f72c2 {
		max-height: 200px;
		color: #666666;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.popup {
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;

		.shop_item1 {
			padding: 5%;
			width: 90%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: center;

			.item {
				margin-left: 10rpx;
				display: block;
				width: 100%;
				height: 120rpx;
				position: relative;
				margin-bottom: 30rpx;

				.name {
					position: absolute;
					top: 0rpx;
					left: 100rpx;
				}

				.ppname {
					position: absolute;
					top: 30rpx;
					color: #999999;
					left: 100rpx;
				}

				.add {
					position: absolute;
					top: 30rpx;
					color: #999999;
					right: 30rpx;
				}

				.price {
					position: absolute;
					top: 40rpx;
					line-height: 40rpx;
					color: #FD3833;
					left: 100rpx;
					font-size: 35rpx;

					.word1 {
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
